import { throttle } from "@/utils/throttle";

Page<
  {
    /**
     * 页面显示数据
     */
    list: number[];
    /**
     * 头部面板中的导航面板高度+分割面板高度
     */
    pageNavWrapperSplitPanelTotalHeight: number;
    /**
     * 分类面板高度样式
     */
    contentPanelHeightStyle: string;
    /**
     * 内容面板的y轴是否可滚动
     */
    enableContentScrollY: boolean;
    translateYStyle: string;
    classifyPanelTranslateYStyle: string;
  },
  {
    /**
     * 头部面板高度
     */
    topPanelHeight: number;
    /**
     * 底部面板高度
     */
    bottomPanelHeight: number;
    /**
     * 头部面板中的导航面板高度
     */
    pageNavWrapperHeight: number;
    /**
     * 头部面板的内容面板高度
     */
    topPanelContentWrapperHeight: number;
    /**
     * 分割面板高度
     */
    splitPanelHeight: number;
    touchStartX: number;
    touchStartY: number;
    moveBeginX: number;
    moveBeginY: number;
    moveEndX: number;
    moveEndY: number;
    translateY: number;

    classifyPanelTouchStartX: number;
    classifyPanelTouchStartY: number;
    classifyPanelMoveBeginX: number;
    classifyPanelMoveBeginY: number;
    classifyPanelMoveEndX: number;
    classifyPanelMoveEndY: number;
    classifyPanelTranslateY: number;
    classifyContentFullHeight: number;
    contentPanelWrapperHeight: number;
    /**
     * original-bar-height 组件渲染完毕之后, 触发的回调函数
     */
    onOriginalBarHeightMounted: () => void;
    /**
     * 计算相关元素的高度
     */
    calcEleHeight: () => void;
    /**
     * 滚动监听
     */
    onScrollView: (e: WechatMiniprogram.CustomEvent) => void;
    onTouchStart: (e: WechatMiniprogram.TouchEvent) => void;
    onTouchStart2: (e: WechatMiniprogram.TouchEvent) => void;
    onTouchMove2: (e: WechatMiniprogram.TouchEvent) => void;
    onTouchMove: (e: WechatMiniprogram.TouchEvent) => void;
    onTouchEnd: (e: WechatMiniprogram.TouchEvent) => void;
    extractPageXY: (touches: WechatMiniprogram.TouchDetail[]) => {
      x: number;
      y: number;
    };
    onClassifyContentMounted: (e: WechatMiniprogram.TouchEvent) => void;
    isValidTouchY: (
      moveEndX: number,
      touchStartX: number,
      moveEndY: number,
      touchStartY: number
    ) => boolean;
    calcMoveDistance: (
      detalY: number,
      moveBeginY: number,
      moveEndY: number
    ) => number;
    needExecuteOnTouchMove: (detalY: number) => boolean;
    goBack: () => void;
  }
>({
  topPanelHeight: 0,
  pageNavWrapperHeight: 0,
  topPanelContentWrapperHeight: 0,
  splitPanelHeight: 0,
  bottomPanelHeight: 0,
  touchStartX: 0,
  touchStartY: 0,
  moveBeginX: 0,
  moveBeginY: 0,
  moveEndX: 0,
  moveEndY: 0,
  translateY: 0,
  classifyContentFullHeight: 0,

  classifyPanelTouchStartX: 0,
  classifyPanelTouchStartY: 0,
  classifyPanelMoveBeginX: 0,
  classifyPanelMoveBeginY: 0,
  classifyPanelMoveEndX: 0,
  classifyPanelMoveEndY: 0,
  classifyPanelTranslateY: 0,
  contentPanelWrapperHeight: 0,

  /**
   * 页面的初始数据
   */
  data: {
    list: new Array(10).fill(true).map((item, idx) => idx),
    pageNavWrapperSplitPanelTotalHeight: 0,
    contentPanelHeightStyle: "",
    enableContentScrollY: false,
    translateYStyle: "transform: translateY(0)",
    classifyPanelTranslateYStyle: "transform: translateY(0)",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {},
  goBack() {
    wx.navigateBack({
      delta: 1,
    });
  },
  onOriginalBarHeightMounted() {
    console.log("onOriginalBarHeightMounted");
    this.calcEleHeight();
  },
  calcEleHeight() {
    wx.createSelectorQuery()
      .selectAll(
        ".top-panel,.page-nav-wrapper,.split-panel-wrapper,.bottom-panel-wrapper"
      )
      .boundingClientRect((ret) => {
        const rects =
          ret as unknown as WechatMiniprogram.BoundingClientRectCallbackResult[];
        const topPanelRect = rects[0];
        const pageNavWrapperRect = rects[1];
        const splitPanelWrapperRect = rects[2];
        const bottomPanelWrapperRect = rects[3];

        this.topPanelHeight = topPanelRect.height;
        this.bottomPanelHeight = bottomPanelWrapperRect.height;
        this.pageNavWrapperHeight = pageNavWrapperRect.height;
        this.splitPanelHeight = splitPanelWrapperRect.height;
        this.topPanelContentWrapperHeight =
          this.topPanelHeight - this.pageNavWrapperHeight;

        const pageNavWrapperSplitPanelTotalHeight =
          this.pageNavWrapperHeight + this.splitPanelHeight;

        const contentPanelHeightStyle = `height: calc(100vh - ${pageNavWrapperSplitPanelTotalHeight}px - ${this.bottomPanelHeight}px);`;
        console.log("contentPanelHeightStyle", contentPanelHeightStyle);

        this.setData(
          {
            pageNavWrapperSplitPanelTotalHeight,
            contentPanelHeightStyle,
          },
          () => {
            // wx.createSelectorQuery()
            //   .select(".content-panel-wrapper")
            //   .boundingClientRect((rect) => {
            //     this.contentPanelWrapperHeight = rect.height;
            //   })
            //   .exec();
          }
        );
      })
      .exec();
  },
  onScrollView(e: WechatMiniprogram.CustomEvent) {
    // if (this.topPanelContentWrapperHeight === 0) {
    //   return;
    // }
    // const { scrollTop, scrollHeight, deltaY } = e.detail;
    // const enableContentScrollY =
    //   scrollTop + 1 >= this.topPanelContentWrapperHeight;
    // this.setData({
    //   enableContentScrollY,
    // });
    // console.log(
    //   enableContentScrollY,
    //   this.topPanelContentWrapperHeight,
    //   scrollTop,
    //   scrollHeight,
    //   deltaY
    // );
  },
  extractPageXY(touches: WechatMiniprogram.TouchDetail[]) {
    const x = touches[0].clientX;
    const y = touches[0].clientY;
    return { x, y };
  },
  onTouchStart(e: WechatMiniprogram.TouchEvent) {
    if (e.touches && e.touches.length > 0) {
      const { x, y } = this.extractPageXY(e.touches);
      this.touchStartX = x;
      this.touchStartY = y;
      this.moveBeginX = x;
      this.moveBeginY = y;
      console.log(this.touchStartX, this.touchStartY);
    }
  },
  isValidTouchY(
    moveEndX: number,
    touchStartX: number,
    moveEndY: number,
    touchStartY: number
  ) {
    const detalX = moveEndX - touchStartX;
    const detalY = moveEndY - touchStartY;
    return Math.abs(detalY) - Math.abs(detalX) >= 20;
  },
  calcMoveDistance(detalY: number, moveBeginY: number, moveEndY: number) {
    if (detalY < 0) {
      // 从下向上滑
      let moveDistance = moveBeginY - moveEndY;
      moveDistance *= -1;
      return moveDistance;
    } else {
      // 从上向下滑
      let moveDistance = moveEndY - moveBeginY;
      return moveDistance;
    }
  },
  onTouchMove: throttle(function (this: any, e: WechatMiniprogram.TouchEvent) {
    if (e.touches && e.touches.length > 0) {
      const { x, y } = this.extractPageXY(e.touches);
      this.moveEndX = x;
      this.moveEndY = y;
      const detalY = this.moveEndY - this.touchStartY;
      // 判断是否为y轴滑动
      if (
        this.isValidTouchY(
          this.moveEndX,
          this.touchStartX,
          this.moveEndY,
          this.touchStartY
        )
      ) {
        let translateY = this.translateY;
        translateY += this.calcMoveDistance(
          detalY,
          this.moveBeginY,
          this.moveEndY
        );
        translateY = translateY > 0 ? 0 : translateY;
        translateY =
          Math.abs(translateY) > this.topPanelContentWrapperHeight
            ? this.topPanelContentWrapperHeight * -1
            : translateY;
        this.translateY = translateY;
        const translateYStyle = `transform: translateY(${translateY}px)`;
        this.setData({ translateYStyle });
        // 将本次pageX和pageY设置为moveBeginX，moveBeginY，用于下个onTouchMove方法中计算absMoveDetalY
        this.moveBeginX = x;
        this.moveBeginY = y;
      }
    }
  }, 50),
  needExecuteOnTouchMove(detalY: number) {
    if (detalY < 0) {
      // 从下向上滑
      return Math.abs(this.translateY) < this.topPanelContentWrapperHeight;
    } else {
      // 从上向下滑
      return this.classifyPanelTranslateY >= 0;
    }
  },
  onTouchStart2(e: WechatMiniprogram.TouchEvent) {
    console.log("onTouchStart2", e);
    if (e.touches && e.touches.length > 0) {
      this.onTouchStart(e);

      const { x, y } = this.extractPageXY(e.touches);
      this.classifyPanelTouchStartX = x;
      this.classifyPanelTouchStartY = y;
      this.classifyPanelMoveBeginX = x;
      this.classifyPanelMoveBeginY = y;
    }
  },
  onTouchMove2(e: WechatMiniprogram.TouchEvent) {
    if (e.touches && e.touches.length > 0) {
      const { x, y } = this.extractPageXY(e.touches);
      this.classifyPanelMoveEndX = x;
      this.classifyPanelMoveEndY = y;
      const detalY = this.classifyPanelMoveEndY - this.classifyPanelTouchStartY;
      console.log("detalY", detalY);
      if (this.needExecuteOnTouchMove(detalY)) {
        this.onTouchMove(e);
      } else {
        console.log("onTouchMove2");
        if (e.touches && e.touches.length > 0) {
          const { x, y } = this.extractPageXY(e.touches);
          this.classifyPanelMoveEndX = x;
          this.classifyPanelMoveEndY = y;
          const detalY =
            this.classifyPanelMoveEndY - this.classifyPanelTouchStartY;
          // 判断是否为y轴滑动
          if (
            this.isValidTouchY(
              this.classifyPanelMoveEndX,
              this.classifyPanelTouchStartX,
              this.classifyPanelMoveEndY,
              this.classifyPanelTouchStartY
            )
          ) {
            let classifyPanelTranslateY = this.classifyPanelTranslateY;
            classifyPanelTranslateY += this.calcMoveDistance(
              detalY,
              this.classifyPanelMoveBeginY,
              this.classifyPanelMoveEndY
            );
            classifyPanelTranslateY =
              classifyPanelTranslateY > 0 ? 0 : classifyPanelTranslateY;
            const maxTranslateY =
              this.classifyContentFullHeight - this.contentPanelWrapperHeight;
            console.log("maxTranslateY", maxTranslateY);
            classifyPanelTranslateY =
              Math.abs(classifyPanelTranslateY) >
              this.classifyContentFullHeight - this.contentPanelWrapperHeight
                ? (this.classifyContentFullHeight -
                    this.contentPanelWrapperHeight) *
                  -1
                : classifyPanelTranslateY;
            this.classifyPanelTranslateY = classifyPanelTranslateY;
            const classifyPanelTranslateYStyle = `transform: translateY(${classifyPanelTranslateY}px)`;
            this.setData({ classifyPanelTranslateYStyle });
            // 将本次pageX和pageY设置为moveBeginX，moveBeginY，用于下个onTouchMove方法中计算absMoveDetalY
            this.classifyPanelMoveBeginX = x;
            this.classifyPanelMoveBeginY = y;
          }
        }
      }
    }
  },
  onClassifyContentMounted(e: WechatMiniprogram.TouchEvent) {
    console.log("onClassifyContentMounted", e);
    this.classifyContentFullHeight = e.detail as unknown as number;
  },
  onTouchEnd(e: WechatMiniprogram.TouchEvent) {
    // if (e.touches && e.touches.length > 0) {
    //   const { pageX, pageY } = this.extractPageXY(e.touches);
    //   this.endPageX = pageX;
    //   this.endPageY = pageY;
    //   console.log(this.endPageX, this.endPageY);
    // }
  },
});
